<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <link href="css/element/index.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/element/index.js"></script>



</head>
<body>
<!--<h1 th:text="${host}">Hello World</h1>-->
<!--<div id="aaa">测试</div>-->
<!--<input id="input_id" type="text"/>-->
<div id="app">
    <el-row>
        <el-col :span="8" style="background-color: yellow">
            <el-aside width="200px" style="background-color: yellow">
                <el-menu>
                    <span>导航一</span>
                </el-menu>
                <el-menu>
                    <span>导航二</span>
                </el-menu>
                <el-menu>
                    <span>导航三</span>
                </el-menu>
                <el-menu>
                    <span>导航四</span>
                </el-menu>
            </el-aside>
        </el-col>
        <el-col :span="16">
            <el-header style="text-align: right; font-size: 12px; background-color: blue">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>XXX</span>
            </el-header>
            <el-main style="background-color: aquamarine">
                <!--                {{tableData}}-->
                <el-table :data="tableData">
                    <el-table-column
                            prop="date"
                            label="日期">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            :formatter="nameFormat">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-col>
    </el-row>
    <!--    <el-button>默认按钮</el-button>-->
    <!--    <el-button type="primary">主要按钮</el-button>-->
    <!--    <el-button type="success">成功按钮</el-button>-->
    <!--    <el-button type="info">信息按钮</el-button>-->
    <!--    <el-button type="warning">警告按钮</el-button>-->
    <!--    <el-button type="danger">危险按钮</el-button>-->
    <!--    {{message}}-->
    <!--    <input v-if="show" id="input_id" type="text" v-model="input_value"/>-->
    <!--    <button v-else @click="method1">跳转</button>-->

    <!--    <table class="basic-table">-->
    <!--        <thead>-->
    <!--        <tr>-->
    <!--            <th v-for="(column, cindex) in tableHead" :key="cindex">{{column}}</th>-->
    <!--        </tr>-->
    <!--        </thead>-->
    <!--        <tbody>-->
    <!--        <tr v-for="(row, rindex) in tableBody" :key="rindex">-->
    <!--            <td v-for="(column, cindex) in row" :key="cindex">{{column}}</td>-->
    <!--        </tr>-->
    <!--        </tbody>-->
    <!--    </table>-->
    <!--    侧边导航栏-->
    <!--    <el-container style="height: 500px; border: 1px solid #eee">-->
    <!--        -->
    <!--    </el-container>-->
    <!--    页面头部-->
    <!--    <el-container>-->
    <!--        -->
    <!--    </el-container>-->


</div>

</body>
<script>
    // $(document).ready(function () {
    //     $("#aaa").css("color", "blue");
    //     // $("#input_id").on('blur', function () {
    //     //     $("#aaa").html($("#input_id").val());
    //     // });
    //     // $.ajax({
    //     //     url: '/hello',
    //     //     data: '',
    //     //     type: 'GET',
    //     //     success: function (data) {
    //     //         alert(data);
    //     //     }
    //     // })
    //     // $.ajax({
    //     //     url: '/hello2',
    //     //     data: {'id': '123', 'name': 'abc', 'age': '12'},
    //     //     type: 'POST',
    //     //     success: function (data) {
    //     //         // alert(JSON.stringify(data));
    //     //         $("#input_id").val(data['name']);
    //     //     }
    //     // })
    // });
    var app = new Vue({
        el: '#app',
        //页面上用到的数据都定义在data里。
        data: {
            message: 'Hello Vue!',
            input_value: 'aaa',
            show: false,
            tableHead: ['id', 'name', 'age'],
            tableBody: [],
            tableData: []
        },
        //页面加载完成后就执行的操作都定义在mounted里。
        mounted: function () {
            // this.show = true;
            // for (var i = 0; i < 10; i++) {
            //     this.tableBody.push(['1', 'a', '12']);
            // }
            // for (var i = 0; i < 10; i++) {
            //     var data = {'date': new Date().getMilliseconds(), 'name': 'aaa', 'address': 'abc'}
            //     this.tableData.push(data);
            // }
            this.getData();
        },
        methods: {
            method1: function () {
                alert("1111");
            },
            getData: function () {
                var that = this;
                $.ajax({
                    url: '/tableData',
                    type: 'GET',
                    success: function (data) {
                        that.tableData = data;
                        // alert(JSON.stringify(data));
                        // $("#input_id").val(data['name']);
                        // $.fn.zTree.init($("#treeDemo"), setting, data);
                    }
                });
            },
            nameFormat: function (row) {
                return row.name + "111";
            }
        }
    })
</script>
</html>